<template>
  <div>
    <!-- 商品详情介绍 -->
    <div class="body-main">
      <div class="goods-details">
        <!-- 上 -->
        <div class="prod-intro">
          <!-- 图 -->
          <div class="spic">
            <div class="picbox">
              <div class="bigimg">
                <img src="../assets/img/shoplist/tu1.png" alt="" />
              </div>
              <div class="smalimg">
                <img src="../assets/img/shoplist/tu1.png" alt="" />
                <img src="../assets/img/shoplist/tu1.png" alt="" />
                <img src="../assets/img/shoplist/tu1.png" alt="" />
                <img src="../assets/img/shoplist/tu1.png" alt="" />
                <img src="../assets/img/shoplist/tu1.png" alt="" />
              </div>
              <div class="promse">
                <div>
                  <span
                    ><img
                      src="../assets/img/shoplist/对号 (3)_看图王.png"
                      alt=""
                    />360商城发货&售后</span
                  >
                  <span
                    ><img
                      src="../assets/img/shoplist/对号 (3)_看图王.png"
                      alt=""
                    />360商城发货&售后</span
                  >
                </div>
                <div>
                  <span
                    ><img
                      src="../assets/img/shoplist/对号 (3)_看图王.png"
                      alt=""
                    />360商城发货&售后</span
                  >
                  <span
                    ><img
                      src="../assets/img/shoplist/对号 (3)_看图王.png"
                      alt=""
                    />360商城发货&售后</span
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- 文 -->
          <div class="sinfo">
            <div class="sinfo-title">360 自动出泡洗手机 穹灰蓝</div>
            <div class="subtitle">极速出泡 有效抑菌 环保循环充电</div>
            <a href="#">高清双摄、20米游泳级防水等智能手表，点击查看>></a>
            <div class="box-price">
              <div class="pri">
                价 &nbsp;&nbsp; 格
                <span class="newpri">￥99.00</span>
                <span class="oldpri">￥129</span>
              </div>
              <div class="pri">领 &nbsp;&nbsp; 劵
                <img class="juan" src="../assets/img/shoplist/领劵.jpg" alt="">
              </div>
              <div class="active pri">
                <span class="p1">促 &nbsp;&nbsp; 销
                   <span class="p2">直降</span>
                   </span>                
                <span class="p3">立减 30.00 元</span>
              </div>
            </div>
            <div class="notice">
              <img src="../assets/img/shoplist/通知.png" alt="" />
              物流公告：受疫情影响，黑龙江、北京、河北、河南、湖南、陕西、山东、四川、贵州、甘肃、云南、青海、新疆、内蒙古、宁夏回族自治区等部分地区暂缓发货。
            </div>
            <div class="fenlei">
              <span class="span1">分&nbsp;&nbsp;&nbsp;类</span>
              <span class="span2">洗手机套装（琼灰蓝）</span>
              </div>
              <div class="count">
                数&nbsp;&nbsp;&nbsp;量               
                <span class="contr" @click="updateCount(-1)" style="disabled">-</span>
                <span class="sum">{{this.count}}</span>
                <span class="contr" @click="updateCount(1)">+</span>
              </div>
              <div class="button">
                <button class="btn1 ">立即购买</button>
                <button class="btn2 ">加入购物车</button>
                <button class="btn3">
                  <img src="../assets/img/shoplist/心_看图王.png" alt="" />
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- 下 -->
        <div class="ginfo">
          <!-- 中照片 -->
          <div class="mdimg">
           <a href="#">
             <img src="../assets/img/shoplist/goods--tu1.png" alt="">
           </a>
           <a href="#">
             <img src="../assets/img/shoplist/goods--tu2.png" alt="">
           </a>
          </div>
          <!-- 下整体边框 -->
          <div class="bor">
          <!-- 中间栏 -->
          <div class="center">
            <div>
              <div class="c-text">
                <span v-for="(item,i) in 4" :key="i" ><span  @click="spancur=i" :class="{spancur:spancur==i}">产品详情</span></span>
                <!-- <span>规格参数</span>
                <span>评价（1）</span>
                <span>常见问题</span> -->
              </div>
              <div class="c-btn">
                <span class="span1">立即购买</span>
                <span class="span2">加入购物车</span>
              </div>
            </div>
          </div>
          <!-- 其余 -->
          <div class="xlimg">
             <img src="../assets/img/shoplist/goods--tu3.webp" alt=""> 
             <img src="../assets/img/shoplist/goods--tu4.webp" alt=""> 
             <img src="../assets/img/shoplist/goods-yu5.webp" alt=""> 
             <img src="../assets/img/shoplist/goods--tu6.webp" alt=""> 
             <img src="../assets/img/shoplist/goods--tu7.webp" alt=""> 
             <img src="../assets/img/shoplist/goods--tu8.webp" alt=""> 
             <img src="../assets/img/shoplist/goods--tu9.webp" alt=""> 
             <img src="../assets/img/shoplist/goods--tu10.webp" alt=""> 
             <img src="../assets/img/shoplist/goods--tu11.webp" alt=""> 
          
          
          </div>
          </div>
        </div>
      </div>
    </div>
  
</template>

<script>
export default {
 data() {
   return {
     spancur: 0,
     count:1,
     som:true,
   }
 },
 methods: {
   updateCount(cou) {
     this.count +=cou
   }
 },
};
</script>
<style scoped src="@/assets/css/productdetails.css"></style>
<style lang="scss" scoped>

</style>
